<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex items-center pt-26px pl-26px pr-26px">
            <Remind v-if="isShowRemind" @update:data="isShowRemind = !isShowRemind">
                <template #title>
                    短视频发布注意事项 <el-link href="https://www.baidu.com/" type="primary" underline="always">（查看视频）</el-link>
                </template>
                <template #content>
                    请务必发布原创视频，且确保视频为首次发布（未在任何视频平台发布过），不可重复发布，避免审核无法通过。<br>
视频清晰，不可展示商家地址、商家联系方式、二维码等，不可展示价格、打折等，不可进行好物安利并引导站外购买等, <el-link href="https://www.baidu.com/" type="danger">会导致帐号异常甚至封号</el-link> 。<br>
不可发布裸露、招商加盟、药品、医疗、金融、交友、灰色行业和国家和平台禁止行业视频相关内容, <el-link href="https://www.baidu.com/" type="danger">会导致封号并可能承担法律责任</el-link> 。<br>
请用户严格遵守法律法规，不得发布任何违法、违规、低俗、过激、虚假及违反社会公序良俗等信息！<br>
请仔细阅读并遵守：<el-link href="https://www.baidu.com/" type="primary" underline="always">信息安全规范承诺函、禁用语及敏感词规则。</el-link><br>
开始使用本产品/服务即代表用户（购买或使用方）完全知情并同意遵守信息安全规范承诺及相应的规则规章，如有违反所造成的的一切后果及责任由用户完全承担。
                </template>
            </Remind>
        </div>
        <div class="pt-26px pl-26px pr-26px">       
            <Tabs v-model="activeIndex" @update:model-value="handleTabClick" active-color="#ffffff">
                <TabItem label="抖音视频列表" path="" :index="0">
                    <div class="flex pt-16px">
                        <div class="w-250px mr-12px">
                            <el-input placeholder="请输入标题"></el-input>
                        </div>
                        <div class="w-190px mr-12px">
                            <el-select v-model="formData.account" placeholder="请选择账号">
                                <el-option v-for="item in formData.accounts" :label="item.label" :value="item.value">
                                    <div></div>
                                </el-option>
                            </el-select>
                        </div>
                        <el-button type="primary" :icon="Search" v-debounce="{ callback: handleSearch, delay: 300 }">搜索</el-button>
                    </div>
                    <div class="video-list">
                        <ul>
                            <li v-for="video in state.videos" :key="video.id">
                                <div class="video-item-img">
                                    <a href=""><img :src="video.img" alt=""></a>
                                    <div class="flex">
                                        <div class="flex items-center mr-20px"><svg-icon size="14px" icon-class="message-3-line" class="mr-4px"></svg-icon>{{ video.message }}</div>
                                        <div class="flex items-center mr-20px"><svg-icon size="14px" icon-class="thumb-up-line" class="mr-4px"></svg-icon>{{ video.zan }}</div>
                                        <div class="flex items-center"><svg-icon size="14px" icon-class="movie-line" class="mr-4px"></svg-icon>{{ video.play }}</div>
                                    </div>
                                    <mark>已发布</mark>
                                </div>
                                <div class="video-item-title">
                                    <a href="">{{ video.title }}</a>
                                </div>
                                <div class="flex items-center video-item-txt">
                                    <a>{{ video.brand }}</a><b></b><span>{{ video.time }}</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="pt-26px pl-26px pr-26px pb-26px page-container flex flex-center">
                        <el-pagination
                            size="small"
                            background
                            layout="prev, pager, next"
                            :total="50"
                        />
                    </div>
                </TabItem>
                <TabItem label="快手视频列表" path="" :index="1">
                    <h1>内容二</h1>
                </TabItem>
                <TabItem label="西瓜视频列表" path="" :index="2">
                    <h1>内容三</h1>
                </TabItem>
            </Tabs>
        </div>
    </div>
</template>

<script setup lang="ts">
import Tabs from '@/components/Tab/First.vue'
import TabItem from '@/components/Tab/Item.vue'
import { Search } from '@element-plus/icons-vue'

const isShowRemind = ref(true)

const activeIndex = ref(0)

const formData = reactive({
    account:'',
    accounts:[
        {
            label:'',
            value:''
        }
    ],
    
})

const state = reactive({
    videos:[
        {
            id:1,
            img:'https://img47.chem17.com/6/20250509/638824083195759338131.jpg',
            title:'福禄克台式万用表和数据采集器在生产制造业应用的区别和选择',
            time:'2025-05-19',
            brand:'福禄克',
            message:295,
            zan:1246,
            play:2780
        }
    ]
})

function handleTabClick(val:any) {
    activeIndex.value = val.index
}

function handleSearch() {
    console.log('search')
}
</script>

<style lang="scss" scoped>
.video-list{
    ul{
        overflow: hidden;
        margin: 0 -10px;
        li{
            width:20%;
            float: left;
            padding:30px 10px 0;
            .video-item-img{
                height: 0;
                padding-bottom: 62.5%;
                overflow: hidden;
                position: relative;
                border-radius: 8px;
                img{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    z-index: 1;
                }
                mark{
                    position:absolute;
                    top:10px;
                    right:10px;
                    font-size: 12px;
                    color: #fff;
                    line-height: 24px;
                    padding:0 8px;
                    border-radius: 3px;
                    background-color: #68dd39;
                    z-index: 2;
                }
                &>div{
                    position:absolute;
                    width: 100%;
                    left: 12px;
                    bottom:12px;
                    color: #ffffff;
                    font-size: 12px;
                    z-index: 3;
                }
            }
            .video-item-title{
                font-size: 14px;
                height: 20px;
                line-height: 20px;
                overflow: hidden;
                margin-top: 12px;
                a{
                    color: var(--title-color);
                    &:hover{
                        color: var(--mainColor);
                    }
                }
            }
            .video-item-txt{
                font-size: 12px;
                height: 20px;
                line-height: 20px;
                overflow: hidden;
                margin-top: 6px;
                color: #999;
                a{
                    color: #6a90d9;
                    &:hover{
                        color: var(--mainColor);
                    }
                }
                b{
                    margin: 0 12px;
                    height:10px;
                    border-left: 1px solid #dddddd;
                    width:1px;
                }
            }
        }
    }
}
</style>